<template>
	<div class="pc-watch">
		<el-container class="p-container">
			<el-header class="pc-header">
				<pc-header></pc-header>
			</el-header>
			<el-container class="p-container">
				<el-main style="overflow:hidden;">
					<pc-player></pc-player>
				</el-main>
				<el-aside class="pc-aside h-full" width="400px">
					<van-tabs
						v-model:active="active"
						background="transparent"
						animated
						line-height="3px"
						line-width="40px"
					>
						<van-tab title="留言互动">
							<pc-im></pc-im>
						</van-tab>
						<van-tab title="直播介绍">
							<div class="pc-tabs_content van-hairline--top">
<!--								<Poster></Poster>-->
								<img v-if="detail.posterImg" :src="`//${detail.posterImg}?imageMogr2/format/webp`"/>
								<!-- <div v-if="detail && detail.remark">
									<div v-html="detail.remark"></div>
								</div> -->
								<el-empty v-else description="暂无介绍！" />
							</div>
						</van-tab>
					</van-tabs>
				</el-aside>
			</el-container>
		</el-container>
		<!--抽屉-->
		<pc-drawer />
	</div>
</template>

<script setup>
import PcPlayer from './player.vue'
import PcHeader from './header.vue'
import PcIm from './im.vue'
import PcDrawer from './drawer.vue'
import {computed, ref} from 'vue'
import { useStore } from 'vuex'

const active = ref('first')
const store = useStore();

const detail = computed(() => store.state.live.detail)
</script>

<style lang="less">
.pc-watch {
	width: 100vw;
	height: 100vh;
	background-color: var(--background-color, #030910);
	--header-height: 52px;
	--im-container-height: 200px;
	--im-container-toolbar-height: 40px;
	--van-font-bold: 500;
	--van-tab-text-color: var(--tab-text-color, #8a9099);
	--van-tab-active-text-color: var(--tab-active-text-color, #fff);
	--van-tab-font-size: var(--tab-font-size, 16px);
	--van-tabs-bottom-bar-color: var(--tab-active-text-color, #fff);
	.p-container {
		height: 100%;
	}
	.pc-header {
		height: var(--header-height);
		background-color: var(--header-background-color, #1c2131);
	}
	.pc-aside {
		height: 100%;
		background-color: var(--aside-background-color, #383f54);
		.pc-tabs_content {
			padding: 20px;
			color: #fff;
			font-size: 14px;
			text-align: justify;
			word-break: break-all;
			img {
				max-width: 100%;
			}
		}
	}

	.van-tabs {
		&__wrap {
			height: 44px;
		}
		.van-tab {
			&__text {
				font-size: 14px;
			}
		}
	}

	.el-empty__description>p {
		font-size: 14px;
	}
}
</style>
